<template>
  <div>

    <!-- 搜索框 -->
    <el-text class="mx-1" type="primary" size="small" style="margin-left: 20px;">指定库:</el-text>
    <el-select v-model="nameStorageLocation" class="m-2" placeholder="指定库" size="small">
      <el-option v-for="item in nameArrayStorageLocation" :key="item" :label="item" :value="item" />
    </el-select>
    <el-text class="mx-1" type="primary" size="small" style="margin-left: 20px;">指定排:</el-text>
    <el-select v-model="xStorageLocation" class="m-2" placeholder="指定排" size="small">
      <el-option v-for="item in xArrayStorageLocation" :key="item" :label="item" :value="item" />
    </el-select>

    <!-- 
    <span v-for="(item, index) in listStorageLocation" :key="index">
      <br v-if="index === 0 || item.z !== listStorageLocation[index - 1].z">
      <el-tag class="aaa" @click="on_details(item)">{{ "y" + item.y + "--" + "z" + item.z }}</el-tag>

    </span> -->
    <br>
    <div>
      <div v-for="(item, index) in listStorageLocation" :key="index" @click="on_details(item)" class="item" 
        :class="{ newLine: (listStorageLocation[index - 1] != null && item.z !== listStorageLocation[index - 1].z) }">
        <!-- <div v-for="(item, index) in listStorageLocation" :key="index" class="inner-div" :style="{ 'flex-grow':( listStorageLocation[index + 1]!=null && item.z !== listStorageLocation[index + 1].z)?-1:1}"> -->
        <!-- <br v-if="(listStorageLocation[index + 1] != null && item.z !== listStorageLocation[index + 1].z)" style="display: block;"> -->
        <div>
          {{ (listStorageLocation[index - 1] != null && item.z !== listStorageLocation[index - 1].z) }}
          <div class="inner-divss" :style="{ width:  '100%' }">
            {{ "y" + item.y + "--" + "z" + item.z }}
          </div>

        </div>
      </div>
    </div>
    <!-- <span v-for="(item, index) in listStorageLocation" :key="index"
      :style="{ display: (index !== 0 && item.y !== listStorageLocation[index - 1].y) ? 'block' : 'inline-block' }">
      <el-tag>{{ item.y + "-**-" + item.z }}</el-tag>
    </span> -->
    <div>
      <el-dialog v-model="dialogDetails" :title="dialogDetails_title" width="30%" draggable>
        <storageLocationDetails v-if="dialogDetails" :param="dialogDetails_param" />
      </el-dialog>

    </div>
  </div>
</template>
<style scoped>

.item {
  
  float: left;
  min-width: 120PX;
  /* width: calc(10% - 10px);  每行显示 4 个 item，设置宽度为 25% */
  margin: 5px;
  /* 设置 item 之间的间距 */
  background-color: lightblue;
  /* 设置 item 的背景颜色 */
  padding: 10px;
  /* 设置 item 的内边距 */
  box-sizing: border-box;
  /* 设置盒模型为 border-box，确保边框和内边距不会撑大元素 */
  cursor: pointer;
}

.newLine {
  clear: both;
  /* 清除左右浮动 */
}
</style>
<script lang="ts" setup>
import { computed, ref, reactive, onMounted, watch } from 'vue'
import api from '/@/api/sy/apiWMS.js';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
import storageLocationDetails from '/@/views/wms/storagelocation/storageLocationDetails.vue';


// 库位属性
interface interfaceStorageLocation {
  warehouseID: number,
  x: number,
  y: number,
  z: number,
  state: number,
  isHave: boolean,
  codeName: string,
  occRatio: number,
  updateTime: Date | null
  createTime: Date | null
}
// 库位数据
const listStorageLocation = ref<interfaceStorageLocation[]>([])



//所有库位名称
const nameArrayStorageLocation = ref<string[]>([])
// 所有排
const xArrayStorageLocation = ref<number[]>([])

//指定查看的库
const nameStorageLocation = ref<string>("")
// 指定查看库的第几排
const xStorageLocation = ref<number>(0)

// 子菜单-传输数据
const dialogDetails_param = ref<interfaceStorageLocation>()
//子菜单，显示是哪个库的 
const dialogDetails_title = ref("")
//弹窗-开关
const dialogDetails = ref(false)


watch(nameStorageLocation, async (newVal, oldVal) => {
  if (oldVal.length > 0) {
    await getListCodeNameXYZStorageLocation()
    xStorageLocation.value = xArrayStorageLocation.value.length > 0 ? xArrayStorageLocation.value[0] : 0 //查询到的排,其中第一个进行指定赋值
    await getListCodeNameStorageLocation()//查询库位数据
  }
})
watch(xStorageLocation, async (newVal, oldVal) => {
  await getListCodeNameStorageLocation()//查询库位数据
})
/**
 * 获取指定库位的数据的第几排
 */
const getListCodeNameStorageLocation = async () => {
  var param = {
    codeName: nameStorageLocation.value,
    x: xStorageLocation.value,
  }
  await api.post('public/Warehouse/getListCodeNameStorageLocation', param).then((response: any) => {
    // 处理服务器返回的响应
    if (response.data.code == 200) {
      var datas: interfaceStorageLocation[] = response.data.data
      listStorageLocation.value = datas.sort((a, b) => {
        if (a.z !== b.z) {
          return b.z - a.z
        }
        return a.y - b.y
      })
      var y = Array.from(new Set(listStorageLocation.value.map(item => item.y)))
      var z = Array.from(new Set(listStorageLocation.value.map(item => item.z)))

    }
  })
    .catch((error: any) => {
      //console.log(error);
      // 处理错误
    })
    .finally(() => {
      // console.log('必须执行')
    })
}


/**
 * 获取所有库位名称
 */
const getCodeNameArray = async () => {
  await api.post('public/Warehouse/getCodeNameArray').then((response: any) => {
    // 处理服务器返回的响应
    if (response.data.code == 200) {
      nameArrayStorageLocation.value = response.data.data;
    }
  })
    .catch((error: any) => {
      //console.log(error);
      // 处理错误
    })
    .finally(() => {
      // console.log('必须执行')
    })
}
/**
 * 获取指定库的,所拥有的 x排/y列/z层其中之一.xyz取决于前端传参哪个有值,就查哪个
 */
const getListCodeNameXYZStorageLocation = async () => {
  var param = {
    codeName: nameStorageLocation.value,
    x: 1,
    // y: 1,
    // z:1,
  }
  await api.post('public/Warehouse/getListCodeNameXYZStorageLocation', param).then((response: any) => {
    // 处理服务器返回的响应
    if (response.data.code == 200) {
      // nameArrayStorageLocation.value = response.data.data;
      xArrayStorageLocation.value = response.data.data;
    }
  })
    .catch((error: any) => {
      //console.log(error);
      // 处理错误
    })
    .finally(() => {
      // console.log('必须执行')
    })
}

// 弹窗打开
const on_details = async (val: interfaceStorageLocation) => {
  dialogDetails.value = true
  dialogDetails_param.value = val
  dialogDetails_title.value = val.codeName
}
onMounted(async () => {
  await getCodeNameArray()
  if (nameArrayStorageLocation.value.length > 0) {
    nameStorageLocation.value = nameArrayStorageLocation.value[0]
  }
  // console.log(nameStorageLocation.value)
  await getListCodeNameXYZStorageLocation()
  if (xArrayStorageLocation.value.length > 0) {
    xStorageLocation.value = xArrayStorageLocation.value[0]
  }
  // console.log(xStorageLocation.value)

  await getListCodeNameStorageLocation()
  //  
  // 在这里写逻辑
});

</script>
  